<template>
        <img v-show="index == 1" class="explosion" :style=props.style src=@/assets/tank/e1.gif />
        <img v-show="index == 2" class="explosion" :style=props.style src=@/assets/tank/e2.gif />
        <img v-show="index == 3" class="explosion" :style=props.style src=@/assets/tank/e3.gif />
        <img v-show="index == 4" class="explosion" :style=props.style src=@/assets/tank/e4.gif />
        <img v-show="index == 5" class="explosion" :style=props.style src=@/assets/tank/e5.gif/>
        <img v-show="index == 6" class="explosion" :style=props.style src=@/assets/tank/e6.gif />
        <img v-show="index == 7" class="explosion" :style=props.style src=@/assets/tank/e7.gif />
        <img v-show="index == 8" class="explosion" :style=props.style src=@/assets/tank/e8.gif />
        <img v-show="index == 9" class="explosion" :style=props.style src=@/assets/tank/e9.gif />
        <img v-show="index == 10" class="explosion" :style=props.style src=@/assets/tank/e10.gif />
        <img v-show="index == 11" class="explosion" :style=props.style src=@/assets/tank/e11.gif />
        <img v-show="index == 12" class="explosion" :style=props.style src=@/assets/tank/e12.gif />
        <img v-show="index == 13" class="explosion" :style=props.style src=@/assets/tank/e13.gif />
        <img v-show="index == 14" class="explosion" :style=props.style src=@/assets/tank/e14.gif />
        <img v-show="index == 15" class="explosion" :style=props.style src=@/assets/tank/e15.gif />
        <img v-show="index == 16" class="explosion" :style=props.style src=@/assets/tank/e16.gif />
</template>

<script setup>
    import {ref,reactive,onMounted,nextTick,onUnmounted} from 'vue'
    import { ElMessage } from 'element-plus'
    let uploadRef = ref(null)
    let props = defineProps(['style','id'])
    let imgSrc = ref('')
    let index = ref(1)
    let player = ref(null)
    let audioSrc = ref("/tank/audio/explode.wav")
    let emits = defineEmits(['removeExplosion'])
    let temp = null
    onMounted(function () {
        temp = setInterval(() => {
                index.value++
        if(index.value > 16){
            emits('removeExplosion', props.id)
        }
    },60)
    })

    onUnmounted(function () {
        clearInterval(temp)
    })
</script>

<style scoped>
.explosion{
        position:absolute;
        z-index: 20;
}
</style>